$(function () {
    var title=$('#select-activity>option').eq(0).text()
    // 下拉框初始化
    $(".scenic").M_select({
        // 手动添加下拉款图片（以html页面为起始位置写路径）
        "Img": "../../assets/plugin/M_select/up6.png",
        "Img2": "../../assets/plugin/M_select/down6.png",
        "radius": "4px",
        "Title": "选择活动主题",
        "inputName": "selected_value",
        // 默认选中的值（参数值写需要选中的select的value值）
        "selected": "0",
        Succee: function () {
            site = $('#select-activity').val()
            title=$('#select-activity>option').eq(site).text()
            myChart2(title1,title)
            myChart3(title2,title)
        }
    });
    // 线上宣推数据
    var data1=[120, 132, 101, 134] //第一阶段
    var data2=[150, 182, 131, 164] //第二阶段
    var data3=[180, 212, 161, 194] //第三阶段
    var data4=[210, 242, 191, 224] //第四阶段
    var title1='微博'
    // 线上宣推切换
    $('#activity1>a').click(function(){
        $(this).addClass('active').siblings().removeClass('active')
        let index=$(this).index()
        title1=$(this).text()
        if(index==0){//微信
            data1=[150, 182, 131, 164]
            data2=[180, 212, 161, 194]
            data3=[210, 242, 191, 224]
            data4=[230, 272, 221, 254]
            myChart2(title1,title)
        }
        if(index==1){//微博
            data1=[120, 162, 101, 134]
            data2=[150, 192, 131, 154]
            data3=[180, 202, 161, 204]
            data4=[200, 262, 200, 251]
            myChart2(title1,title)
        }
        if(index==2){//微博话题
            data1=[100, 132, 101, 114]
            data2=[160, 182, 141, 164]
            data3=[190, 202, 181, 204]
            data4=[210, 252, 201, 224]
            myChart2(title1,title)
        }
        if(index==3){//头条号
            data1=[110, 162, 101, 144]
            data2=[160, 192, 141, 164]
            data3=[190, 202, 191, 204]
            data4=[230, 242, 221, 264]
            myChart2(title1,title)
        }
    })

    // 短视频宣推数据
    var data5=[180, 212, 161, 194,164,134] //播放量
    var data6=[210, 242, 191, 224,190,150] //收录视频数
    var title2='抖音'
    // 短视频宣推切换
    $('#activity2>a').click(function(){
        $(this).addClass('active').siblings().removeClass('active')
        let index=$(this).index()
            title2=$(this).text()
        if(index==0){//抖音话题
            data5=[150, 182, 131, 164,134,150]
            data6=[180, 212, 161, 194,214,160]
            myChart3(title2,title)
        }
        if(index==1){//抖音
            data5=[120, 162, 101, 134,164,150]
            data6=[150, 192, 131, 154,190,160]
            myChart3(title2,title)
        }
        if(index==2){//快手
            data5=[110, 182,91, 104,144,140]
            data6=[140, 172, 121, 134,170,150]
            myChart3(title2,title)
        }
    })
    function myChart1() {
        let data=[10,359,22,30,159,26,82]
        var myChart = echarts.init(document.getElementById('activity_1'));
        option = {
            grid: [{
                top:'10%',
                left:'15%',
                right:'10%',
                height: '100%'
            }],
            xAxis: [{
                show: false,
            }],
            yAxis: [{
                axisTick: 'none',
                axisLine: 'none',
                // offset:'20',
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                        fontSize: '12',
                    }
                },
                data: ['H5原创设计','信息流推广','KOL','新闻媒体稿件','创意视频','创意长图','创意海报']

            }],
            series: [{
                // name: '条',
                type: 'bar',
                progressiveChunkMode: 'sequential',
                data:data,
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        distance: 20,
                        formatter: function(param, value) {
                            return param.value;
                        },
                        textStyle: {
                              color: '#fff',
                            fontSize: '14',
                        }
                    }
                },
                barWidth: 16,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: 'rgba(0,228,255,0.1)'
                        }, {
                            offset: 1,
                            color: 'rgba(0,228,255,1)'
                        }]),
                        barBorderRadius: 0,
                    }
                },
                z: 2
            }]
        };


        myChart.setOption(option);

    }
    // 线上宣推数据
    function myChart2(title1,title) {
        var myChart = echarts.init(document.getElementById('activity_2'));
        let myColor=['#4B66C7','#9A4CFB','#E76D59','#53FCB3','#00E4FF']
        let titles=title1
        let tit=title
        console.log(tit)
        var fontColor = '#30eee9';
        option ={
            grid: {
                left: '9%',
                right: '10%',
                top:'20%',
                bottom: '10%',
                containLabel: true
            },
            tooltip : {
                show: true,
                trigger: 'axis',
                formatter: '{b}'+titles+'数据'+'<br>'+tit+'<br>'+'{a0}:{c}'+'<br>'+'{a1}:{c1}'+'<br>'+'{a2}:{c2}'+'<br>'+'{a3}:{c3}'
            },
            legend: {
                show:true,
                x:'center',
                top:'1%',
                y:'35',
                icon: 'stack',
                itemWidth:10,
                itemHeight:10,
                textStyle:{
                    color:'#fff'
                },
                data:['内容数量' , '阅读量' , '阅读人数' , '用户参与量']
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    axisLabel:{
                        color: fontColor
                    },
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:'#397cbc'
                        }
                    },
                    axisTick:{
                        show:false,
                    },
                    splitLine:{
                        show:false,
                        lineStyle:{
                            color:'#195384'
                        }
                    },
                    data : ['第一阶段(9.12-9.27)','第二阶段(9.27-11)','第三阶段(11.01-12)','第四阶段(12.01-03)']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    name : '(万)',
                    min:0,
                    max:350,
                    splitNumber:7,
                    axisLabel : {
                        // formatter: '{value}',
                        textStyle:{
                            color:'#2ad1d2'
                        }
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#27b4c2'
                        }
                    },
                    axisTick:{
                        show:false,
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            color:'#11366e'
                        }
                    }
                }

            ],
            series : [
                {
                    name:'内容数量',
                    type:'line',
                    symbol:'circle',
                    symbolSize: 8,
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color:'#0092f6',
                            lineStyle: {
                                color: "#0092f6",
                                width:1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,146,246,0.9)'
                                }]),
                            }
                        }
                    },
                    markPoint:{
                        itemStyle:{
                            normal:{
                                color:'red'
                            }
                        }
                    },
                    data:data1
                },
                {
                    name:'阅读量',
                    type:'line',
                    symbol:'circle',
                    smooth: true,
                    symbolSize: 8,

                    itemStyle: {
                        normal: {
                            color:'#00d4c7',
                            lineStyle: {
                                color: "#00d4c7",
                                width:1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,212,199,0.9)'
                                }]),
                            }
                        }
                    },
                    data:data2
                },
                {
                    name:'阅读人数',
                    type:'line',
                    symbol:'circle',
                    smooth: true,
                    symbolSize: 8,
                    itemStyle: {
                        normal: {
                            color: '#aecb56',
                            lineStyle: {
                                color: "#aecb56",
                                width:1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(114,144,89,0.9)'
                                }]),
                            }
                        }
                    },
                    data:data3
                },
                {
                    name:'用户参与量',
                    type:'line',
                    symbol:'circle',
                    smooth: true,
                    symbolSize: 8,
                    itemStyle: {
                        normal: {
                            color: '#3A44FB',
                            lineStyle: {
                                color: "#3A44FB",
                                width:1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,46,101,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,166,246,0.9)'
                                }]),
                            }
                        }
                    },
                    data:data4
                }
            ]
        };


        myChart.setOption(option);

    }
    // 短视频宣推数据
    function myChart3(title2,title) {
        var myChart = echarts.init(document.getElementById('activity_3'));
        let myColor=['#4B66C7','#9A4CFB','#E76D59','#53FCB3','#00E4FF']
        let titles=title2
        let tit=title
        var fontColor = '#30eee9';
        option ={
            grid: {
                left: '9%',
                right: '10%',
                top:'20%',
                bottom: '10%',
                containLabel: true
            },
            tooltip : {
                show: true,
                trigger: 'axis',
                formatter: '{b}'+titles+'数据'+'<br>'+tit+'<br>'+'{a0}:{c}'+'<br>'+'{a1}:{c1}'
            },
            legend: {
                show:true,
                x:'center',
                top:'1%',
                y:'35',
                icon: 'stack',
                itemWidth:10,
                itemHeight:10,
                textStyle:{
                    color:'#fff'
                },
                data:['播放量' , '收录视频数']
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    axisLabel:{
                        color: fontColor
                    },
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:'#397cbc'
                        }
                    },
                    axisTick:{
                        show:false,
                    },
                    splitLine:{
                        show:false,
                        lineStyle:{
                            color:'#195384'
                        }
                    },
                    data : ['9月','10月','11月','12月','1月','2月']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    name : '(万)',
                    min:0,
                    max:350,
                    splitNumber:7,
                    axisLabel : {
                        // formatter: '{value}',
                        textStyle:{
                            color:'#2ad1d2'
                        }
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#27b4c2'
                        }
                    },
                    axisTick:{
                        show:false,
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            color:'#11366e'
                        }
                    }
                }

            ],
            series : [
                {
                    name:'播放量',
                    type:'line',
                    symbol:'circle',
                    symbolSize: 8,
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color:'#0092f6',
                            lineStyle: {
                                color: "#0092f6",
                                width:1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,146,246,0.9)'
                                }]),
                            }
                        }
                    },
                    markPoint:{
                        itemStyle:{
                            normal:{
                                color:'red'
                            }
                        }
                    },
                    data:data5
                },
                {
                    name:'收录视频数',
                    type:'line',
                    symbol:'circle',
                    smooth: true,
                    symbolSize: 8,

                    itemStyle: {
                        normal: {
                            color:'#00d4c7',
                            lineStyle: {
                                color: "#00d4c7",
                                width:1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,212,199,0.9)'
                                }]),
                            }
                        }
                    },
                    data:data6
                }
            ]
        };


        myChart.setOption(option);

    }
    myChart1()
    myChart2(title1,title)
    myChart3(title2,title)
})
